முன்னணி குறியீடு பிரிப்பு: பாதை-அடிப்படையிலான மற்றும் கூறு-அடிப்படையிலான

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
 return (
 
 Loading...

இந்த எடுத்துக்காட்டில், Home மற்றும் About கூறுகள் React.lazy() மற்றும் டைனமிக் இறக்குமதிகளைப் பயன்படுத்தி சோம்பேறியாக ஏற்றப்படுகின்றன. கூறுகள் ஏற்றப்படும்போது Suspense கூறு ஒரு பின்னூட்ட UI ஐ வழங்குகிறது. ரியாக்ட் ரூட்டர் வழிசெலுத்தலைக் கையாளுகிறது மற்றும் தற்போதைய பாதையின் அடிப்படையில் சரியான கூறு ரெண்டர் செய்யப்படுவதை உறுதி செய்கிறது.

எடுத்துக்காட்டு (ஆங்குலர்)

ஆங்குலரில், பாதை-அடிப்படையிலான குறியீடு பிரிப்பு சோம்பேறி-ஏற்றப்பட்ட தொகுப்புகளைப் பயன்படுத்தி அடையப்படுகிறது.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

இங்கே, பாதை உள்ளமைவில் உள்ள loadChildren பண்புக்கூறு, சோம்பேறியாக ஏற்றப்பட வேண்டிய தொகுதிக்கு பாதையைக் குறிப்பிடுகிறது. பயனர் அதனுடன் தொடர்புடைய பாதைக்குச் செல்லும்போது ஆங்குலர் ரூட்டர் தானாகவே தொகுதியையும் அதன் தொடர்புடைய கூறுகளையும் ஏற்றிச் செல்லும்.

எடுத்துக்காட்டு (வியூ.js)

வியூ.js ரூட்டர் உள்ளமைவில் டைனமிக் இறக்குமதிகளைப் பயன்படுத்தி பாதை-அடிப்படையிலான குறியீடு பிரிப்பையும் ஆதரிக்கிறது.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
 { path: '/', component: () => import('./components/Home.vue') },
 { path: '/about', component: () => import('./components/About.vue') }
];

const router = new VueRouter({
 routes
});

export default router;

பாதை உள்ளமைவில் உள்ள component விருப்பம், ஒத்திசைவற்ற முறையில் கூறுகளை ஏற்றுவதற்கு டைனமிக் இறக்குமதியைப் பயன்படுத்துகிறது. வியூ ரூட்டர் பாதை அணுகப்படும்போது கூறுவின் ஏற்றுதல் மற்றும் ரெண்டரிங்கைக் கையாளும்.

பாதை-அடிப்படையிலான குறியீடு பிரிப்பின் நன்மைகள்

• செயல்படுத்த எளிதானது: பாதை-அடிப்படையிலான குறியீடு பிரிப்பு, குறிப்பாக நவீன கட்டமைப்புகளால் வழங்கப்படும் ஆதரவுடன், செயல்படுத்துவது ஒப்பீட்டளவில் எளிதானது.
• கவலைகளின் தெளிவான பிரிப்பு: ஒவ்வொரு பாதையும் பயன்பாட்டின் ஒரு தனித்தனி பகுதியைக் குறிக்கிறது, இது குறியீடு மற்றும் அதன் சார்புகளைப் பற்றி சிந்திப்பதை எளிதாக்குகிறது.
• பெரிய பயன்பாடுகளுக்கு பயனுள்ளதாக: பல பாதைகள் மற்றும் அம்சங்களைக் கொண்ட பெரிய பயன்பாடுகளுக்கு பாதை-அடிப்படையிலான குறியீடு பிரிப்பு குறிப்பாக நன்மை பயக்கும்.

பாதை-அடிப்படையிலான குறியீடு பிரிப்பின் குறைபாடுகள்

• போதுமானதாக இல்லாமல் இருக்கலாம்: பல பாதைகளில் பகிரப்படும் சிக்கலான கூறுகளைக் கொண்ட பயன்பாடுகளுக்கு பாதை-அடிப்படையிலான குறியீடு பிரிப்பு போதுமானதாக இல்லாமல் இருக்கலாம்.
• ஆரம்ப ஏற்றுதல் நேரம் அதிகமாக இருக்கலாம்: ஒரு பாதை பல சார்புகளைக் கொண்டிருந்தால், அந்தப் பாதைக்கான ஆரம்ப ஏற்றுதல் நேரம் அதிகமாக இருக்கலாம்.

கூறு-அடிப்படையிலான குறியீடு பிரிப்பு

கூறு-அடிப்படையிலான குறியீடு பிரிப்பு, குறியீடு பிரிப்புக்கு ஒரு படி மேலே சென்று, தனிப்பட்ட கூறுகளின் அடிப்படையில் பயன்பாட்டுக் குறியீட்டை சிறிய துண்டுகளாகப் பிரிக்கிறது. இந்த அணுகுமுறை குறியீடு ஏற்றுதல் மீது மிகவும் நுணுக்கமான கட்டுப்பாட்டை அனுமதிக்கிறது மற்றும் சிக்கலான UI கள் மற்றும் மறுபயன்பாட்டு கூறுகளைக் கொண்ட பயன்பாடுகளுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும்.

செயலாக்கம்

கூறு-அடிப்படையிலான குறியீடு பிரிப்பும் டைனமிக் இறக்குமதிகளை நம்பியுள்ளது, ஆனால் முழு பாதைகளை ஏற்றுவதற்குப் பதிலாக, தனிப்பட்ட கூறுகள் தேவைக்கேற்ப ஏற்றப்படுகின்றன. இதை பின்வரும் நுட்பங்களைப் பயன்படுத்தி அடையலாம்:

1. கூறுகளை சோம்பேறியாக ஏற்றுதல்: அவை தேவைப்படும்போது, ​​அவை முதல் முறையாக ரெண்டர் செய்யப்படும்போது அல்லது ஒரு குறிப்பிட்ட நிகழ்வு ஏற்படும்போது மட்டுமே கூறுகளை ஏற்ற டைனமிக் இறக்குமதிகளைப் பயன்படுத்தவும்.
2. நிபந்தனை ரெண்டரிங்: பயனர் தொடர்பு அல்லது பிற காரணிகளின் அடிப்படையில் கூறுகளை நிபந்தனையுடன் ரெண்டர் செய்யவும், நிபந்தனை பூர்த்தி செய்யப்படும்போது மட்டுமே கூறு குறியீட்டை ஏற்றவும்.
3. இடைவெளி பார்வையாளர் API: ஒரு கூறு பார்வையில் தெரியும் போது கண்டறிய இடைவெளி பார்வையாளர் API ஐப் பயன்படுத்தவும், அதற்கேற்ப அதன் குறியீட்டை ஏற்றவும். பார்வையில் இல்லாத கூறுகளை ஏற்றுவதற்கு இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு (ரியாக்ட்)

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
 return (
 

 Loading...
}>